.yq_box1 {
  width: 100%;
  height: 621px;
  margin-top: 20px;
}
.yq_box1 dl {
  width: 100%;
  height: 100%;
  background: #FAFAFA;
  margin-right: 30px;
}
.yq_box1 dl i { display: block; width: 100%; height: 100%; position: absolute; background: black; left: 0; top: 100%; opacity: 0; transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53); }
.yq_box1 dl * { transition: all 0.2s; }
.yq_box1 dt {
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
  background: #fafafa;
}
.yq_box1 img { width: 100%;  height: 100%;object-fit: cover;}
.yq_box1 dd { text-align: center; color: #ff3f3b; font-size: 18px; height: 65px; padding-top: 15px; position: absolute; bottom: 0; width: 100%; background: #f5f5f5; overflow: hidden; }
.yq_box1 span, .yq_box1 em { display: block; font-style: normal; font-weight: normal; font-size: 14px; }
.yq_box1 span { color: #666666; margin: -4px 0 10px; }
.yq_box1 em { color: #999999; margin-bottom: 7px; opacity: 0; }
.yq_box1 .con, .yq_box .chat { opacity: 0; }
.yq_box1 dl:hover i { opacity: .3; top: 0; }
.yq_box1 dl:hover dd { height: 110px; }
.yq_box1 dl:hover dd em, .yq_box1 dl:hover dd a { opacity: 1; }
.yq_box1 dl:hover dd .pa { color: #ff3f3b; }

.yq_box1 dl, .bio_box dl { position: relative; overflow: hidden; float: left; }
.yq_box1 dl .con, .yq_box1 dl .chat, .bio_box dl .con, .bio_box dl .chat { display: inline-block; width: 78px; height: 24px; color: #999999; border: 1px solid #999; border-radius: 4px; margin-right: 15px; font-size: 12px; line-height: 24px; font-weight: normal; text-align: center; transition: all .2s; }
.yq_box1 dl .con:hover, .bio_box dl .con:hover { background: #ff3f3b; border-color: #ff3f3b; color: #FFFFFF; }
.yq_box1 dl .chat, .bio_box dl .chat { border-color: #ff3f3b; background: #ff3f3b; color: #FFFFFF; margin-right: 0; }
.yq_box1 dl .pa, .bio_box dl .pa { display: block; font-size: 16px; color: #333333; }
.yq_box1 dl .pa:hover, .bio_box dl .pa:hover { color: #ff3f3b; }
.yq_box1 dl:after, .bio_box dl:after { content: " "; display: block; width: 0; height: 1px; background: #ff3f3b; position: absolute; bottom: 0; transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53); }
.yq_box1 dl:hover:after, .bio_box dl:hover:after { width: 100%; }


.yq_box {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
.yq_box dl {
  width: 365px;
  height: 100%;
  background: #FAFAFA;
  margin-right: 30px;
}
.yq_box dl i { display: block; width: 100%; height: 100%; position: absolute; background: black; left: 0; top: 100%; opacity: 0; transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53); }
.yq_box dl * { transition: all 0.2s; }
.yq_box dt {
  width: 100%;
  height: 225px;
  overflow: hidden;
  background: #fafafa;
}
.yq_box img { width: 365px;  height: 225px;object-fit: cover;}
.yq_box dd { text-align: center; color: #ff3f3b; font-size: 18px; height: 65px; padding-top: 15px; position: absolute; bottom: 0; width: 100%; background: #f5f5f5; overflow: hidden; }
.yq_box span, .yq_box em { display: block; font-style: normal; font-weight: normal; font-size: 14px; }
.yq_box span { color: #666666; margin: -4px 0 10px; }
.yq_box em { color: #999999; margin-bottom: 7px; opacity: 0; }
.yq_box .con, .yq_box .chat { opacity: 0; }
.yq_box dl:hover i { opacity: .3; top: 0; }
.yq_box dl:hover dd { height: 110px; }
.yq_box dl:hover dd em, .yq_box dl:hover dd a { opacity: 1; }
.yq_box dl:hover dd .pa { color: #ff3f3b; }

.yq_box dl, .bio_box dl { position: relative; overflow: hidden; float: left; }
.yq_box dl .con, .yq_box dl .chat, .bio_box dl .con, .bio_box dl .chat { display: inline-block; width: 78px; height: 24px; color: #999999; border: 1px solid #999; border-radius: 4px; margin-right: 15px; font-size: 12px; line-height: 24px; font-weight: normal; text-align: center; transition: all .2s; }
.yq_box dl .con:hover, .bio_box dl .con:hover { background: #ff3f3b; border-color: #ff3f3b; color: #FFFFFF; }
.yq_box dl .chat, .bio_box dl .chat { border-color: #ff3f3b; background: #ff3f3b; color: #FFFFFF; margin-right: 0; }
.yq_box dl .pa, .bio_box dl .pa { display: block; font-size: 16px; color: #333333; }
.yq_box dl .pa:hover, .bio_box dl .pa:hover { color: #ff3f3b; }
.yq_box dl:after, .bio_box dl:after { content: " "; display: block; width: 0; height: 1px; background: #ff3f3b; position: absolute; bottom: 0; transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53); }
.yq_box dl:hover:after, .bio_box dl:hover:after { width: 100%; }